<template>
  <div>
    <van-empty
      v-if="albumList.length==0"
      customStyle=""
      description="相册中没有照片哦，快去试试在相册中插入照片吧"
    />
    <div v-for="(sitem, i) in splitList">
      <div style="margin: 10rpx;color:#646566;font-size:small">
        <span
          style="
            background-color: #66ccff;
            padding: 2rpx;
            width: 10rpx;
            margin-right: 30rpx;
          "
        ></span
        >{{ new Date(splitList[i][0].d_date).getFullYear() }}年{{
          new Date(splitList[i][0].d_date).getMonth() + 1
        }}月{{
          new Date(splitList[i][0].d_date).getDate() > 10
            ? new Date(splitList[i][0].d_date).getDate()
            : "0" + new Date(splitList[i][0].d_date).getDate()
        }}日
      </div>
      <div style="display: flex; flex-direction: row">
        <div v-for="(item, index) in splitList[i]">
          <image
            style="
              width: 150rpx;
              height: 150rpx;
              border-radius: 10rpx;
              margin: 10rpx;
            "
            :src="item.img_url"
            @click="getImgIndex(index,i)"
          />
        </div>
      </div>
    </div>

    <!-- <div>
          {{ new Date(item.d_date).getFullYear() }}年{{
            new Date(item.d_date).getMonth() + 1
          }}月{{ new Date(item.d_date).getDate() }} 日
        </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      albumList: [],
      splitList: [],
    };
  },
  methods: {
    getImgIndex(index,i) {
      let j;
      let tempindex = index;
      for(j = 0;j < i;j++){
        tempindex+=this.splitList[j].length;
      }
      //准备一个装图片路径的  数组imgs
      let imgs = this.albumList.map((item) => {
        //只返回图片路径
        return item.img_url;
      });
      uni.previewImage({
        urls: imgs,
        current: tempindex,
      });
    },
  },
  components: {},
  onLoad() {
    uni.setNavigationBarTitle({
      title: "相册",
    });
    this.sjhrequest
      .run("findDiaryImgByUser", {})
      .then((res) => {
        this.albumList = res.imgList.reverse();
        let i;
        let buffer = [];
        if (this.albumList.length != 0) {
          buffer.push(this.albumList[0]);
          for (i = 1; i < this.albumList.length; i++) {
            if (this.albumList[i].d_date != this.albumList[i - 1].d_date) {
              this.splitList.push(buffer);
              buffer = [];
              buffer.push(this.albumList[i]);
            } else {
              buffer.push(this.albumList[i]);
            }
          }
          if (buffer.length != 0) {
            this.splitList.push(buffer);
          }
        }
      })
      .catch((err) => {
        // 处理异常
        console.error(err);
      });
  },
};
</script>

<style>
page {
  background-color: #ffffff;
}
</style>